import React from 'react';
import { List, Bubble } from 'tea-component';
import { timeFormatYMDHms, abbreviation, getQueryVariable } from '@src/utils/index';

export function Ahref(props) {
  return (
    <a
      href={props.href}
      style={{
        color: '#006EFF',
        textDecoration: 'none',
        cursor: 'pointer',
        backgroundColor: 'transparent',
        outline: 'none',
        ...props.style,
      }}
      target="_blank"
    >
      {props.children}
    </a>
  );
}

export function DataCard(props) {
  return (
    <div
      className="data-card"
      style={{
        width: '295px',
        padding: '11px',
        display: 'flex',
        alignItems: 'center',
        backgroundColor: '#FFFFFF',
        border: '1px solid #E2E2E2',
        boxSizing: 'border-box',
      }}
    >
      <img src={props.imgsrc} style={{ width: '54px', marginRight: '14px' }}></img>
      <div>
        <div
          style={{
            fontSize: '12px',
            fontFamily: 'MicrosoftYaHei-Bold',
            color: '#999999',
          }}
        >
          {props.title}
        </div>
        <div
          style={{
            fontSize: '22px',
            fontFamily: 'MicrosoftYaHei',
            color: '#000000',
            letterSpacing: '1px',
            ...props.amountStyle,
          }}
        >
          {props.amount}
        </div>
      </div>
    </div>
  );
}

export function ListItemContent(props) {
  return (
    <List.Item
      style={{
        height: '50px',
        lineHeight: '50px',
        fontSize: '12px',
        fontFamily: 'MicrosoftYaHei',
        color: '#444444',
        padding: '0px 10px',
        display: 'flex',
        justifyContent: 'space-between',
      }}
    >
      <span>{props.name}</span>
      <span
        style={{
          width: '130px',
        }}
      >
        {timeFormatYMDHms(props.Timestamp)}
      </span>
    </List.Item>
  );
}

export function ListItemContent1(props) {
  return (
    <List.Item
      style={{
        height: '50px',
        fontSize: '12px',
        fontFamily: 'MicrosoftYaHei',
        color: '#444444',
        padding: '0px 10px',
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
      }}
    >
      <div
        style={{
          fontSize: '12px',
          fontFamily: 'MicrosoftYaHei',
        }}
      >
        <div
          style={{
            color: '#006EFF',
          }}
        >
          <Ahref
            href={`/blockdetail?id=${encodeURIComponent(props.Id)}&blockHash=${encodeURIComponent(
              props.BlockHash,
            )}&chainid=${encodeURIComponent(props.chainId)}`}
          >
            #{props.BlockHeight}
          </Ahref>
        </div>
        <div
          style={{
            color: '#999999',
          }}
        >
          {props.TxNum}笔交易 出块节点：
          <Bubble arrowPointAtCenter placement="top" content={props.ProposalNodeId}>
            {abbreviation(props.ProposalNodeId)}
          </Bubble>
        </div>
      </div>
      <span
        style={{
          width: '130px',
        }}
      >
        {timeFormatYMDHms(props.Timestamp)}
      </span>
    </List.Item>
  );
}

export function ListItemContent2(props) {
  return (
    <List.Item
      style={{
        height: '50px',
        fontSize: '12px',
        fontFamily: 'MicrosoftYaHei',
        color: '#444444',
        padding: '0px 10px',
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
      }}
    >
      <div
        style={{
          fontSize: '12px',
          fontFamily: 'MicrosoftYaHei',
        }}
      >
        <div
          style={{
            color: '#006EFF',
          }}
        >
          <Ahref
            href={`/tsdetail?id=${encodeURIComponent(props.Id)}&tp=ts&chainid=${encodeURIComponent(props.chainId)}`}
          >
            <Bubble arrowPointAtCenter placement="top" content={`tx ${props.TxId}`}>
              tx {abbreviation(props.TxId, 16)}
            </Bubble>
          </Ahref>
        </div>
        <div
          style={{
            color: '#999999',
          }}
        >
          交易状态：
          <span
            style={{
              color: props.Status === '成功' ? '#0FC05E' : '#EA6559',
            }}
          >
            {props.Status}
          </span>{' '}
          所在区块：
          <Bubble arrowPointAtCenter placement="top" content={props.BlockHash}>
            {abbreviation(props.BlockHash, 8)}
          </Bubble>
        </div>
      </div>
      <span
        style={{
          width: '130px',
        }}
      >
        {timeFormatYMDHms(props.Timestamp)}
      </span>
    </List.Item>
  );
}

export function ListItemTitle(props) {
  return (
    <List.Item
      style={{
        height: '50px',
        lineHeight: '50px',
        fontSize: '16px',
        fontFamily: 'MicrosoftYaHei',
        color: '#888888',
        padding: '0px 10px',
        display: 'flex',
        justifyContent: 'space-between',
      }}
    >
      <span>{props.name}</span>
      <span
        style={{
          width: '130px',
        }}
      >
        {props.time}
      </span>
    </List.Item>
  );
}

export function BusinessItem(props) {
  return (
    <div
      style={{
        fontSize: '12px',
        fontFamily: 'Microsoft YaHei',
        color: '#888888',
        padding: '12px 0px',
      }}
    >
      <div
        style={{
          display: 'inline-block',
          width: '105px',
        }}
      >
        {props.name}
      </div>
      <span
        style={{
          color: '#444444',
        }}
      >
        {props.value}
      </span>
    </div>
  );
}

export function BaseItem(props) {
  return (
    <div
      style={{
        fontSize: '12px',
        fontFamily: 'Microsoft YaHei',
        color: '#888888',
        padding: '12px 0px',
      }}
    >
      <div style={{ display: 'inline-block', width: '105px' }}>{props.name}</div>
      <span style={{ color: '#444444' }}>{props.value}</span>
    </div>
  );
}

export function ABread(props) {
  return (
    <a
      href={props.href}
      style={{
        color: 'inherit',
        textDecoration: 'none',
      }}
    >
      {props.children}
    </a>
  );
}

function breadNode(bread, index = 0) {
  const chainId = getQueryVariable('chainid') || '';
  switch (bread) {
    case '区块链浏览器':
      return (
        <ABread href={`/home?chainid=${chainId}`} key={index}>
          区块链浏览器/
        </ABread>
      );
    case '区块列表':
      return (
        <ABread href={`/blocklist?chainid=${chainId}`} key={index}>
          区块列表/
        </ABread>
      );
    case '区块详情':
      return (
        <ABread href="javascript:history.back(-1)" key={index}>
          区块详情/
        </ABread>
      );
    case '交易列表':
      return (
        <ABread href={`/tslist?chainid=${chainId}`} key={index}>
          交易列表/
        </ABread>
      );
    default:
      return <span key={index}>{bread}</span>;
  }
}

export function Bread(breadcrumb) {
  const arr = breadcrumb.split('/');
  const len = arr.length;
  const nodeList = arr.map((value, index) => {
    if (index === len - 1) {
      return <span key={index}>{value}</span>;
    }
    return breadNode(value, index);
  });
  return <>{nodeList}</>;
}
